<!-- @format -->

<template>
  <div class="mathjax-container">
    <MathJaxRenderer>
      ### 分析11111 - **公式含义**：这是一个重要极限公式。它表明当自变量 \(x\)
      趋近于 \(0\) 时，正弦函数 \(\sin x\) 与自变量 \(x\) 的比值的极限值为 \(1\)
      。 -
      **证明思路**：可以利用单位圆中的三角函数线来证明。在单位圆中，通过比较三角形和扇形的面积关系，得到关于
      \(\sin x\) 、 \(x\) 、 \(\tan x\) 的不等式关系，再利用夹逼准则证明该极限。
      - **应用场景**： -
      **求极限**：在求一些复杂的函数极限时，常常会将其变形，使其能够运用这个重要极限来求解。例如求
      \(\lim_{x \to 0}\frac{\sin 3x}{x}\) ，可变形为 \(\lim_{x \to 0}\frac{\sin
      3x}{3x}\times3\) ，再利用该公式得到结果为 \(3\) 。 -
      **等价无穷小替换**：当 \(x \to 0\) 时， \(\sin x\) 与 \(x\)
      是等价无穷小，在求极限过程中，某些情况下可以将 \(\sin x\) 替换为 \(x\)
      来简化计算，但要注意替换的条件，通常在乘除运算中使用等价无穷小替换较为安全。
    </MathJaxRenderer>
    <h1>MathJax 数学公式渲染</h1>
    <div class="formula-example">
      <h2>重要极限公式示例</h2>
      123123123123 -------
      <MarkdownMathRenderer :content="markdownContent">
        <h3>分析</h3>
        <ul>
          <li>
            <strong>公式含义</strong>：这是一个重要极限公式。它表明当自变量
            \(x\) 趋近于 \(0\) 时，正弦函数 \(\sin x\) 与自变量 \(x\)
            的比值的极限值为 \(1\) 。
          </li>
          <li>
            <strong>证明思路</strong
            >：可以利用单位圆中的三角函数线来证明。在单位圆中，通过比较三角形和扇形的面积关系，得到关于
            \(\sin x\) 、 \(x\) 、 \(\tan x\)
            的不等式关系，再利用夹逼准则证明该极限。
          </li>
          <li>
            <strong>应用场景</strong>：
            <ul>
              <li>
                <strong>求极限</strong
                >：在求一些复杂的函数极限时，常常会将其变形，使其能够运用这个重要极限来求解。例如求
                \(\lim_{x \to 0}\frac{\sin 3x}{x}\) ，可变形为 \(\lim_{x \to
                0}\frac{\sin 3x}{3x}\times3\) ，再利用该公式得到结果为 \(3\) 。
              </li>
              <li>
                <strong>等价无穷小替换</strong>：当 \(x \to 0\) 时， \(\sin x\)
                与 \(x\) 是等价无穷小，在求极限过程中，某些情况下可以将 \(\sin
                x\) 替换为 \(x\)
                来简化计算，但要注意替换的条件，通常在乘除运算中使用等价无穷小替换较为安全。
              </li>
            </ul>
          </li>
        </ul>

        <div class="formula-display">
          <h3>公式展示</h3>
          <div class="formula">$$\lim_{x \to 0}\frac{\sin x}{x} = 1$$</div>
        </div>
      </MarkdownMathRenderer>

      <div class="more-examples">
        <h2>更多数学公式示例</h2>

        $$\lim_{x \to 0}\frac{\sin x}{x}=1$$

        <MarkdownMathRenderer>
          123123123123 22-------11 1.首先分析\(\sqrt{68}\)
          对(68)进行因数分解，(68=4\times17)。0根据二次根式的性质\(\sqrt{ab}=\sqrt{a}\c.dot\sqrt{b}\)((a\geq0,b\gego))，则(\sqrt{68}-\sart{4\times17}=\sqrt{4}\times\sgrtf17})。
          因为(\sqrt{4}=2)，所以(\sqrt{68}-2\sqr0tf17})。
          2.然后计算(\sqrt{5}+\sqrt{68}):
          将(\sgrt{68}=2\sqrt{17})代入式子，得到0(\sqrt{5}+\sqrt{68}-\sqrt{5}+
          2\sqrt{17})。
          因为(\sqrt{5})和(2\sqrt{17})不是同类二次0根式，所以不能再进一步合并。如果要求其近似值:
          (\sqrt{5}\approx2.236),(\sqrt{17}\approx4.123)，则(2\sqrt{17}\approx2\times4.123=8.246).
          。那么(\sqrt{5}+2\sqrt{17}\approx2.236 + 8.246=10.482)。
          所以(\sqrt{5}+\sqrt{68}=\sqrt{5}+2\sqrt{17})(精确值)，近似值约为(10.482)。

          <h3>上下标示例</h3>
          <p>上标示例: \(a^2\), \(x^n\), \(e^{i\pi}\)</p>
          <p>下标示例: \(a_1\), \(x_n\), \(a_{ij}\)</p>
          <p>混合上下标: \(a_i^j\), \(x_{i+1}^{n-1}\)</p>

          <div>$$\sqrt{x^2 + y^2}$$</div>
          <div>$$\sqrt{x^2 + y^2}$$</div>
          <div>$$\sqrt{x^2 + y^2}$$</div>
          <div>$$\sqrt{x^2 + y^2}$$</div>
          <div>$$\sqrt{x^2 + y^2}$$</div>
          <div>$$\sqrt{x^2 + y^2}$$</div>

          <h3>极限示例</h3>
          <p>
            极限表达式: $$\lim_{n \to \infty}\left(1 + \frac{1}{n}\right)^n =
            e$$
          </p>
          <p>
            复杂极限: $$\lim_{x \to 0}\frac{\tan x - x}{x^3} = \frac{1}{3}$$
          </p>

          <h3>积分示例</h3>
          <p>定积分: $$\int_{a}^{b} f(x) \, dx = F(b) - F(a)$$</p>
          <p>不定积分: $$\int x^n dx = \frac{x^{n+1}}{n+1} + C, n \neq -1$$</p>

          <h3>Markdown 语法支持</h3>
          <p>以下是一些 Markdown 语法示例：</p>
          ### 分析11111 - **公式含义**：这是一个重要极限公式。它表明当自变量
          \(x\) 趋近于 \(0\) 时，正弦函数 \(\sin x\) 与自变量 \(x\)
          的比值的极限值为 \(1\) 。 -
          **证明思路**：可以利用单位圆中的三角函数线来证明。在单位圆中，通过比较三角形和扇形的面积关系，得到关于
          \(\sin x\) 、 \(x\) 、 \(\tan x\)
          的不等式关系，再利用夹逼准则证明该极限。 - **应用场景**： -
          **求极限**：在求一些复杂的函数极限时，常常会将其变形，使其能够运用这个重要极限来求解。例如求
          \(\lim_{x \to 0}\frac{\sin 3x}{x}\) ，可变形为 \(\lim_{x \to
          0}\frac{\sin 3x}{3x}\times3\) ，再利用该公式得到结果为 \(3\) 。 -
          **等价无穷小替换**：当 \(x \to 0\) 时， \(\sin x\) 与 \(x\)
          是等价无穷小，在求极限过程中，某些情况下可以将 \(\sin x\) 替换为 \(x\)
          来简化计算，但要注意替换的条件，通常在乘除运算中使用等价无穷小替换较为安全。
        </MarkdownMathRenderer>
      </div>

      <div class="markdown-section">
        <h2>Markdown 渲染示例</h2>
        <MarkdownMathRenderer>
          <h3>Markdown 语法支持</h3>
          <p>以下是一些 Markdown 语法示例：</p>

          ## 标题示例 ### 三级标题 #### 四级标题 **粗体文本** 和 *斜体文本* -
          无序列表项 1 - 无序列表项 2 - 嵌套列表项 1. 有序列表项 1 2. 有序列表项
          2 > 这是一个引用块 > 可以有多行 ```javascript // 代码块示例 function
          hello() { console.log("Hello, Markdown!"); } ```
          [链接示例](https://example.com) ### 表格示例 | 表头1 | 表头2 | 表头3 |
          |-------|-------|-------| | 单元格1 | 单元格2 | 单元格3 | | 单元格4 |
          单元格5 | 单元格6 | ### 数学公式与Markdown结合
          Markdown中也可以嵌入数学公式： 行内公式: $E=mc^2$ 行间公式:
          $$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$$
        </MarkdownMathRenderer>
      </div>
    </div>
    ------------------------
    <h2>Markdown 渲染示例1123123123</h2>
    <MarkdownMathRenderer :content="markdownContent"></MarkdownMathRenderer>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import MarkdownMathRenderer from './MarkdownMathRenderer.vue'

  const markdownContent = ref(`
# Markdown与KaTeX数学公式示例

## 基础Markdown语法

### 文本格式化
**粗体文本** 和 *斜体文本*

### 列表
- 项目1
- 项目2
- 项目3

### 链接和图片
[Vue.js官网](https://vuejs.org/)

### 代码
\`\`\`javascript
const greeting = 'Hello World!';
console.log(greeting);
\`\`\`

## 数学公式示例

### 行内公式
质能方程: $E = mc^2$

欧拉公式: $e^{i\pi} + 1 = 0$




### 块级公式
$$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$$

$$\int_{a}^{b} f(x) \, dx = F(b) - F(a)$$

### 自己测试的数据 start
$x_{1,2}$  

 $e^{i\pi} + 1 - e_12456 = 0$

$x_{1,2} = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$

$\alpha, \beta, \gamma, \delta, \epsilon, \zeta, \eta, \theta$

$\alpha$

$\theta$

$x_{1,2}$

$\frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $

### 自己测试的数据 end
### 矩阵
$$\begin{pmatrix}
 a & b \\
 c & d
\end{pmatrix}$$

### 分数和上下标
$x_{1,2} = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$


$\sqrt{2}$$

$$\sqrt[3]{8}$$



$$\sqrt{\frac{a+b}{2}}$$

$$\sqrt{1 + \sqrt{1 + \sqrt{1 + x}}}$$

### 希腊字母
$\alpha, \beta, \gamma, \delta, \epsilon, \zeta, \eta, \theta$

$\Gamma, \Delta, \Theta, \Lambda, \Xi, \Pi, \Sigma, \Phi, \Psi, \Omega$
    `)
</script>

<style scoped>
  .mathjax-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Times New Roman', serif;
  }

  .formula-example {
    margin-top: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .markdown-section {
    margin-top: 30px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .math-content {
    line-height: 1.6;
    margin-bottom: 20px;
  }

  .formula-display {
    margin-top: 30px;
    padding: 15px;
    background-color: #f0f8ff;
    border-radius: 6px;
    text-align: center;
  }

  .formula {
    font-size: 1.2em;
    padding: 10px;
  }

  h1,
  h2,
  h3 {
    color: #333;
  }

  ul {
    padding-left: 20px;
  }

  li {
    margin-bottom: 10px;
  }
</style>

<!-- <script lang="ts">
declare global {
  interface Window {
    MathJax: any;
  }
}
</script> -->
